<template>
    <div class="index">
        <div class="detail">
            <h2>销售订单详情</h2>
            <div class="btn">
                <el-button   @click="Edit" v-show="State == 'draft'">编辑</el-button>
                 <el-button type="primary" v-show="State == 'draft'" @click="sureState">确认销售</el-button>
                <el-button type="info" v-show="State == 'draft'" @click="cancelState">取消订单</el-button>
                <el-button type="text">
                    <el-dropdown trigger="click">
                        <span class="dropdownLink">
                            <p>打印<i class="el-icon-caret-bottom el-icon--right"></i></p>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="sOrderReviewPrint">订单审核表</el-dropdown-item>
                            <!-- <el-dropdown-item @click.native="print1">订单审核表11</el-dropdown-item> -->
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-button>
            </div>
            <el-descriptions title="" :column="3" :border='true' class="tab" :contentStyle="CS">
                <el-descriptions-item label="订单名称">{{ result.name }}</el-descriptions-item>
                <el-descriptions-item label="订单状态">{{ result.state == 'draft' ? '报价单' : (result.state == 'sale' ? '销售订单' :
                    '已取消')
                }}</el-descriptions-item>
                <!-- <el-descriptions label="订单日期">{{ result.dateOrder }}</el-descriptions> -->
                <el-descriptions-item label="有效期">{{ result.validityDate }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ result.createDate }}</el-descriptions-item>
                <el-descriptions-item label="确认日期">{{ result.confirmationDate }}</el-descriptions-item>
                <el-descriptions-item label="销售员">{{ result.userName }}</el-descriptions-item>
                <el-descriptions-item label="客户"><a @click="alertSupplier">{{ result.partnerName }}</a></el-descriptions-item>
                <el-descriptions-item label="发票地址">{{ result.partnerInvoiceAddress }}</el-descriptions-item>
                <el-descriptions-item label="送货地址">{{ result.partnerShippingAddress }}</el-descriptions-item>
                <!-- <el-descriptions-item label="价格表">{{ result.pricelistId }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="发票状态">{{ result.invoiceStatus }}</el-descriptions-item>                 -->
                <el-descriptions-item label="不含税金额">{{ result.amountUntaxed }}</el-descriptions-item>
                <el-descriptions-item label="含税金额">{{ result.amountTax }}</el-descriptions-item>
                <!-- <el-descriptions-item label="总计金额">{{ result.amountTotal }}</el-descriptions-item> -->
                <el-descriptions-item label="付款条件">{{ result.paymentTermName }}</el-descriptions-item>
                <!-- <el-descriptions-item label="交货条件">{{ result.deliveryConditions }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="销售频道">{{ result.teamId }}</el-descriptions-item> -->
                <el-descriptions-item label="交货条件">{{ result.deliveryConditions }}</el-descriptions-item>
                <!-- <el-descriptions-item label="创建者">{{ result.createUid }}</el-descriptions-item> -->
                <el-descriptions-item label="最后更新者">{{ result.writeUserName }}</el-descriptions-item>
                <!-- <el-descriptions-item label="最后更新时间">{{ result.writeDate }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="本地/海外">{{ result.warehouseId }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="Procurement Group">{{ result.procurementGroupId }}</el-descriptions-item> -->
                <el-descriptions-item label="指令单号">{{ result.instructionOrder }}</el-descriptions-item>
                <el-descriptions-item label="合同号">{{ result.contractNo }}</el-descriptions-item>
                <el-descriptions-item label="运输方式">{{ result.transportType == 'logistics' ? '物流公司' : '快递公司'
                }}</el-descriptions-item>
                <el-descriptions-item label="提供增值发票">{{ result.isProvideInvoice === 't' ? '是' : '否'
                }}</el-descriptions-item>
                <el-descriptions-item label="承担运费">{{ result.isProvideFreight === 't' ? '是' : '否' }}</el-descriptions-item>
                <el-descriptions-item label="合同签订日期">{{ result.contractDate }}</el-descriptions-item>
                <el-descriptions-item label="含税">{{ result.isTax === 't' ? '是' : '否' }}</el-descriptions-item>
                <el-descriptions-item label="银行">{{ result.worldchampBankId }}</el-descriptions-item>
                <!-- <el-descriptions-item label="总金额大写">{{ result.amountTotalDaxie }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="扣减">{{ result.isInventory }}</el-descriptions-item> -->
                <el-descriptions-item label="备注" :contentStyle="{ 'width': '200px' }">{{ result.note
                }}</el-descriptions-item>
            </el-descriptions>
            <el-table :data="tableData" style="width: 90%;margin: -15px auto;" max-height="350"
                :header-cell-style="{ background: '#f8f8f9', color: 'black', 'text-align': 'center' }" border
                :cell-style="{ 'text-align': 'center' }">
                <el-table-column prop="sequence" label="序号">
                </el-table-column>
                <el-table-column prop="name" label="产品" width="180">
                    <template slot-scope="scope">
                        <div @click="stockdetail(scope.row)">
                            <a href="javascript:;">{{ scope.row.name }}</a>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="partMessage" label="说明" width="180">
                </el-table-column>
                <el-table-column prop="surfaceTreatment" label="表面处理">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.surfacetreatment_type" :value="scope.row.surfaceTreatment" />
                    </template>
                </el-table-column>
                <el-table-column prop="productUomQty" label="订购数量">
                </el-table-column>
                <el-table-column prop="qtyDelivered" label="已送货">
                </el-table-column>
                <!-- <el-table-column prop="address" label="已开票">
                </el-table-column> -->
                <el-table-column prop="priceUnit" label="单价">
                </el-table-column>
                <el-table-column prop="stockNum" label="库存量">
                </el-table-column>
                <el-table-column prop="productUom" label="单位">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.stock_uom" :value="scope.row.productUom" />
                    </template>
                </el-table-column>
                <el-table-column prop="worldchampCurrency" label="币种">
                </el-table-column>
                <!-- <el-table-column prop="worldchampTaxId" label="税">
                </el-table-column> -->

                <el-table-column prop="priceSubtotal" label="小计">
                </el-table-column>
            </el-table>
            <div class="total">
                <div class="totalright">
                    <p>总计：<strong>￥{{ amountTotal }}</strong></p>
                    <p>金额大写：<strong>{{ amountTotalDaxie }}</strong></p>
                </div>
            </div>
            <div class="line">
                <el-divider></el-divider>
            </div>
        </div>
        <div class="product">
            <el-table :data="tableData2" max-height="450" style="width: 100%"
                :header-cell-style="{ background: '#f8f8f9', color: 'black', 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }">
                <el-table-column prop="handleMan" label="操作人">
                </el-table-column>
                <el-table-column prop="handleType" label="操作类型">
                </el-table-column>
                <el-table-column prop="recordTime" label="操作时间">
                </el-table-column>
                <el-table-column prop="handleNum" label="操作数量">
                </el-table-column>
                <el-table-column prop="saleOrderMsg" label="操作信息">
                </el-table-column>
            </el-table>
        </div>
        <!-- 供应商详情弹框 -->
        <el-dialog :visible.sync="openSupplier" width="1500px" append-to-body>
            <Supplierdetail :fid="result.partnerId"></Supplierdetail>
        </el-dialog>
        <!-- 库存详情弹框 -->
        <div v-if="showStock">
        <el-dialog :visible.sync="openStock" width="1500px" append-to-body :destroy-on-colse="true" @close='closeDialog'> 
            <Stockdetail :fid="stockid"></Stockdetail>
        </el-dialog>
    </div>
    <el-dialog :visible.sync="openEditSale" width="1800px" append-to-body :destroy-on-colse="true" > 
            <Saleedit @transfer="getOpenEditSale" :fid="saleOrderId"></Saleedit>
        </el-dialog>
    </div>
</template>
<script>
import { downloadTemplate, downloadBlob, exportFile } from '@/utils/print.js'
import { getOrder, getOrderdetail, getcz, sureState, cancelState, sOrderReview } from "@/api/system/order";
export default {
    dicts: ['stock_uom', 'surfacetreatment_type'],
    data() {
        return {
            saleOrderId:parseInt(this.$route.query.listId),
            // 销售订单编辑弹框
            openEditSale:false,
             // 是否显示弹框，用来解决第二次弹框组件内容没变化的问题
             showStock:true,
            // 传给库存详情页的id
            stockid: null,
            // 库存详情弹框
            openStock: false,
            // 供应商详情弹框
            openSupplier: false,
            // 列表描述单元格的样式
            CS: {
                //   'text-align': 'center',  //文本居中
                'max-width': '280px',   //最小宽度
                'word-break': 'break-all'  //过长时自动换行
            },
            State: null,
            flag: null,
            result: {},
            tableData: [],
            tableData2: [],
            // 总价
            amountTotal: 0,
            // 大写
            amountTotalDaxie: '零',
            // result2: {}
        };
    },
    mounted() {
        // 通过$route.query将传过来的值接收;
        let id = this.fid||this.$route.query.listId;
        // this.tableData = this.$route.query.manageList;
        this.getList(id);
        // this.getdetail(id)
        this.getOperationrecords(id)

    },
    methods: {
        // 子组件销售订单编辑传过来的参数
        getOpenEditSale(msg,id) {
            // console.log(msg);
            this.openEditSale = msg
            this.getList(id)
       
     },
        // 跳转编辑页面
        Edit() {
            this.openEditSale=true
        },
        // 确认销售订单
        sureState() {
            const id =  this.fid||this.$route.query.listId;
            sureState(id).then(res => {
                // console.log(res);
                this.getList(id);
            })

        },
        // 取消销售订单
        cancelState() {
            const id =  this.fid||this.$route.query.listId;
            cancelState(id).then(res => {
                // console.log(res);
                this.getList(id);
            })

        },
        // 销售订单详情
        getList(id) {
            getOrder(id).then(res => {
                // console.log(res);
                // console.log('12346546');
                this.result = res.data
                this.State = res.data.state
                this.tableData = res.data.saleOrderParts


                this.amountTotal = res.data.amountTotal
                this.amountTotalDaxie = res.data.amountTotalDaxie
                // this.result2 = res.data[1]
                // console.log(this.result);
            })
        },
        // 销售订单里的产品子项
        getdetail(id) {
            getOrderdetail(id).then(res => {
                // console.log(res);
                this.tableData = res.data
            })

        },
        // 操作详情
        getOperationrecords(id) {
            getcz(id).then(response => {
                // console.log(response);
                this.tableData2 = response.data;
                // this.title = "操作详情";
            });
        },
        // 下载订单审核表
        sOrderReviewPrint() {
            let id =  this.fid||this.$route.query.listId;
            this.$confirm('是否打印订单审核表?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return sOrderReview(id);
            }).then(response => {
                // console.log(response);
                const name = null
                const dixed = '销售订单审核表'
                downloadBlob(response, name, dixed);
            }).catch(function (err) {
                // console.log(err);
            });
        },
        // 点击产品名称弹出详情
        stockdetail(row) {
            // console.log(row.productTemplateId)
            this.showStock=true
            this.stockid = row.productTemplateId
            this.openStock = true
           
        },
        // 点击供应商名称弹出详情
        alertSupplier() {
            this.openSupplier = true
        },
        // 关闭弹框的时候销毁内容  再次点击重新创建
        closeDialog() {
            this.showStock=false
        }

    },
    components: {
        Supplierdetail: () => import('@/views/system/supplierdetail/index.vue'),
        Stockdetail: () => import('@/views/system/stockdetail/index.vue'),
        Saleedit: () => import('@/views/system/saleedit/index.vue')
    },
    props: {
        fid: {
            type: Number, default: null
        }
    },
    watch: {},
    computed: {},
    created() { },
};
</script>
<style lang="scss"  scoped>
.total {

    // border: 1px red solid;
    width: 90%;
    margin: 50px auto;

    // margin: 40px 60% 30px;
    // border-top: 2px gray solid;
    // text-align:right;
    .totalright {
        width: 30%;
        // float: right;
        margin-left: 70%;
        border-top: 2px gray solid;

        p {
            line-height: 40px;
            text-align: right;
        }
    }

}

.index {
    // background: #f9f9f9;
    border: 1px transparent solid;


}

h2 {
    text-align: center;
    line-height: 80px;
}


.detail {
    background: #fff;
    border: 1px rgb(232, 228, 228) solid;
    // box-shadow: 0 3px 20px -15px #000000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px auto;
    width: 80%;

    .btn {
        width: 90%;
        text-align: right;
        // border: 1px red solid;
        // margin-left: 77%;
        margin: 0 auto;



    }

    .tab {
        width: 90%;
        margin: 20px auto;
    }

    .line {
        margin: 30px auto;
        // border: 1px rgb(224, 17, 17) solid;
        padding: 10px;
        height: 20px;
    }



}

.product {
    width: 80%;
    background: #fff;
    border: 1px rgb(232, 228, 228) solid;
    // box-shadow: 0 3px 20px -15px #000000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px auto;
}

.my-content {
    background: #1f1e1e;
}


::v-deep .el-descriptions-item__label.is-bordered-label {
    font-weight: bold;
    color: #808080;
    // background: #f1f0f0;
    // background: #63d4ce
    background: #f8f8f9;
    // border: 1px red solid;
}
</style>
